<template>
	<view class="tim_u">
		<uni-popup ref="pop1" type="bottom" :is-show="props.isShow" zindex>
			<view class="utModal text-left">
				<view>
					<view class="ut_top padding-top p_rlt padding-right-sm" @touchmove.stop.prevent="stopPrevent">
						<view class="flex align-center text-center">
							<view class="ut_tit flex-sub text-white text-xll text-left padding-left">排队取号</view>
						</view>
					</view>
					<view class="ut_cent nbg p_rlt margin-left-sm ">
						<view class="duiList cf" @touchmove.stop.prevent="stopPrevent">
							<view class="flex align-center duiItm padding-top-sm">
								<view class="flex-sub padding-left text-c9">
									队列组
								</view>
								<view class="flex-sub text-center text-c9">
									排队中
								</view>
								<view class="flex-sub padding-right text-end text-c9">
									预估时间
								</view>
							</view>
							<scroll-view class="duiScr margin-top-xs" scroll-y="true" >
								<view class="padding-lr-sm">
									<view v-for="index in 6" :key="index" class="flex align-center duiItm" :class="{'solid-bottom':index<5}">
										<view class="flex-sub padding-left">
											{{index+1}}人
										</view>
										<view class="flex-sub text-center text-ngreen text-xl text-bold">
											1
										</view>
										<view class="flex-sub padding-right text-end text-c9">
											{{index>2?'＞60分钟':'＞30分钟'}}
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
						<view class="duiPro margin-top-sm padding-left padding-bottom-sm">
							<view class="flex align-center text-c6 padding-top-sm">
								<view class="flex-sub">
									意向项目
								</view>
								<view class="padding-lr-lg padding-tb-xs">
									清空
								</view>
							</view>
							<view class="proListbox padding-bottom-sm">
								<view v-for="(item,index) in proList" :key="index" :class="{act:proClass==index&&item.show}" @click="tapProItem(index)" class="d_ib pritem text-center p_rlt">
									{{item.name}}
									<text v-if="item.num>0" class="cu-tag badge">{{item.num}}</text>
									<view class="contrNumbox intlh text-left" :class="{show:item.show}">
										<view class="contrMain p_rlt jtbox padding-bottom-sm">
											<view class="text-c6 padding-left padding-top-xs flex align-center">
												<view class="flex-sub">
													消费人数
												</view>
												<view class="padding-tb-sm padding-lr text-ngreen">
													确定
												</view>
											</view>
											<view class="padding-left-xs">
												<view class="cart_box touch text-c3">
													<view class="d_ib padding-sm margin-right-xs" @click.stop="moveApn(index,item)" hover-class="chover" :hover-stay-time="20">
														<text class="cacBox cuIcon-move text-xl text-bold" :class="{'act':item.num<=0}"></text>
													</view>
													<input type="text" disabled class="cacInput text-xl solid-bottom" :value="item.num||0" />
													<view class="d_ib padding-sm margin-left-xs" @click.stop="addApn(index,item)" hover-class="chover" :hover-stay-time="20">
														<text class="cacBox cuIcon-add text-xl text-bold" :class="{'act':(item.num>=12)}"></text>
													</view>
												</view>
											</view>
										</view>
										
									</view>
								</view>
							</view>
							<view class="text-c9 text-sm">
								不限：根据最快技师安排项目
							</view>
						</view>
					</view>
					<view class="bottomBtn">
						<view class="submitnBtnBox margin-top">
							<view class="flex align-center">
								<view class="flex-sub">
									<view class="d_ib text-c6 padding-lr padding-tb-sm" @click="tapToHome">
										<text class="cuIcon-back"></text>
										返回
									</view>
								</view>
								<view class="sbbtnbox text-white text-sm text-center flex align-center padding-lr-sm">
									<view class="full_btn" @click="nextStep()">
										<text>下一步</text>
										<!-- <text class="margin-left-xs" v-if="mateTips > 0">({{ mateTips }})</text> -->
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<!-- 联系方式 -->
		<uni-popup ref="pop2" type="bottom" zindex>
			<view class="utModal text-left" @touchmove.stop.prevent="stopPrevent">
				<view @click="openKey=false">
					<view class="ut_top padding-top p_rlt padding-right-sm">
						<view class="flex align-center text-center">
							<view class="ut_tit flex-sub text-white text-xll text-left padding-left">联系方式</view>
						</view>
					</view>
					<view class="ut_cent p_rlt margin-left-sm padding-bottom-lg">
						<view class="pad_b48 dianBox p_rlt">
							<!-- @tap="focusSearch" -->
							<view class="cu-bar search bg-white" @click.stop="openKey=!openKey">
								<view class="search-form round padding-left">
									<!-- :focus="turnSearch" @blur="seachTech('blur')" confirm-type="search"-->
									<text class="cuIcon-mobilefill text-ngreen phico"></text>
									<input
										class="seinput"
										placeholder-style="font-size:28rpx"
										v-model="phoneValue"
										disabled
										type="number"
										maxlength="11"
										placeholder="请填写排队人手机号"
									/>
									<!-- <text class="cuIcon-search seachIco" @click.stop="rSeachValue?seachTech('icon'):openKey=!openKey"></text> -->
								</view>
							</view>
							<view class="numkeyBox margin-top-sm" :class="{'show':openKey}" @click.stop="stopPrevent">
								<numberKeyboard ref='KeyboarHid' :keyValue="phoneValue" @back="keyBack" clearBtn showConfirm @finish="onfinish" @inputings='onInput' :psdLength='11'></numberKeyboard>
							</view>
						</view>
						<view class="morconlist intlh">
							<view class="padding-tb padding-lr-lg">
								<view class="flex align-center">
									<view class="flex-sub">
										接受多房
									</view>
									<view class="">
										<switch class="nswitch" :checked="false"/>
									</view>
								</view>
								<view class="padding-top-xs text-sm text-c9">
									可能会安排至多个房间
								</view>
							</view>
							<view class="padding-tb padding-lr-lg">
								<view class="flex align-center">
									<view class="flex-sub">
										接受VIP房
									</view>
									<view class="">
										<switch class="nswitch" :checked="false"/>
									</view>
								</view>
								<view class="padding-top-xs text-sm text-c9">
									您是否接受安排至贵宾房（需加收房费）
								</view>
							</view>
							<view class="padding-tb padding-lr-lg">
								<view class="flex align-center">
									<view class="flex-sub">
										接受拼房
									</view>
									<view class="">
										<switch class="nswitch" :checked="false" />
									</view>
								</view>
								<view class="padding-top-xs text-sm text-c9">
									您是否接受与其他客人共享房间
								</view>
							</view>
						</view>
					</view>
					<view class="bottomBtn">
						<view class="submitnBtnBox margin-top">
							<view class="flex align-center">
								<view class="flex-sub">
									<view class="d_ib text-c6 padding-lr padding-tb-sm" @click.stop="popBack2">
										<text class="cuIcon-back"></text>
										返回
									</view>
								</view>
								<view class="sbbtnbox text-white text-sm text-center flex align-center padding-lr-sm">
									<view class="full_btn" @click.stop="tapNavTo('/pages/others/lineUp/lineUp')">
										<text>去排队领号</text>
										<!-- <text class="margin-left-xs" v-if="mateTips > 0">({{ mateTips }})</text> -->
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="pop3" type="bottom" zindex>
			<view class="utModal text-left" @touchmove.stop.prevent="stopPrevent">
				<view>
					<view class="ut_top padding-top p_rlt padding-right-sm">
						<view class="flex align-center text-center">
							<view class="ut_tit flex-sub text-white text-xll text-left padding-left">排队取号</view>
						</view>
					</view>
					<view class="ut_cent p_rlt margin-left-sm">
						
					</view>
					<view class="bottomBtn">
						<view class="submitnBtnBox margin-top">
							<view class="flex align-center">
								<view class="flex-sub"></view>
								<view class="sbbtnbox text-white text-sm text-center flex align-center padding-lr-sm">
									<view class="full_btn">
										<text>确认</text>
										<!-- <text class="margin-left-xs" v-if="mateTips > 0">({{ mateTips }})</text> -->
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { onLoad } from '@dcloudio/uni-app';
	import numberKeyboard from '@/components/number-keyboard/number-keyboard.vue'
	const emit = defineEmits(["confirm","backPop"])
	const props = defineProps({
		type: {
			type: String,
			default: 'modal'
		},
		// currtshop:{
		// 	type:Object,
		// 	default: ()=>{}
		// },
		// 距离
		// traffic:{
		// 	type:Object,
		// 	default: ()=>{}
		// },
		// 初始化时间
		// parentPick: {
		// 	type: Array,
		// 	default: ()=>[]
		// },
		// hourList: {
		// 	type: Array,
		// 	default: ()=>[]
		// },
		// minList: {
		// 	type: Array,
		// 	default: ()=>[]
		// },
		// dataTime: {
		// 	type: String,
		// 	default: ''
		// },
		// mtype: {
		// 	type: String,
		// 	default: ''
		// },
		// tuiappointTime: {
		// 	type: String,
		// 	default: ''
		// },
		// tipsCode:{
		// 	type: String,
		// 	default: '10'
		// },
		// dayList: {
		// 	type: Array,
		// 	default: ()=>[]
		// },
		// 配置
		// configWkData:{
		// 	type:Object,
		// 	default: ()=>{}
		// },
		// targetTime: { type: Number },
		// ndataString: {
		// 	type: String,
		// 	default: ''
		// },
		showClose: {
			type: Boolean,
			default: false
		},
		// nzIndex:{
		// 	type: Boolean,
		// 	default: false
		// },
		isShow: {
			type: Boolean,
			default: false
		},
		canClose: {
			type: Boolean,
			default: true
		}	
	})
const	repeatClick=ref(false)
const zIndex=ref()
	// pop1-s
const	proClass=ref(0)
const KeyboarHid=ref()
const	proList=ref([
		{
			name:'不限',
			num:0,
			show:false
		},
		{
			name:'推拿',
			num:0,
			show:false
		},
		{
			name:'足疗',
			num:0,
			show:false
		},
		{
			name:'斯帕',
			num:0,
			show:false
		},
		{
			name:'艾灸',
			num:0,
			show:false
		}
	])
	// pop1-e
	// pop2-s
  const	openKey=ref(false)
	const phoneValue=ref('')
	const pop1=ref()
	const pop2=ref()
	const pop3=ref()
	const initData=()=> {
		// setTimeout(()=>{
		// 	this.initLexH()
		// },300)
	}
const	confirm=(source:any)=> {
		repeatClick.value = true;
		setTimeout(() => {
			repeatClick.value = false;
		}, 500);
	
		emit('confirm')
}
const tapToHome=()=> {
			uni.switchTab({
				url: '/pages/index/home/home',
				success: () => {
				}
			});
		}
	const	tapProItem=(index:any)=>{
			if(proClass.value != index){
				proList.value.forEach(item=>{
					item.show = false
				})
			}
			proClass.value = index
			let is_show =proList.value[index].show
			proList.value[index].show=!is_show
		}
	const	moveApn=(index:any,item:any,type:any='ADULT')=>{
			if(item.num<=0){
				return
			}
			let num = item.num;
			num --;
			proList.value[proClass.value].num=num
		}
		const addApn=(index:any,item:any,type:any='ADULT')=>{
			if(item.num>=12){
				return
			}
			let num = item.num;
			num ++;
			proList.value[proClass.value].num=num
		}
	const	nextStep=()=>{
			hidePop('pop1')
			showPop('pop2')
		}
	const	popBack2=()=>{
			hidePop('pop2')
			showPop('pop1')
		}
	const	onfinish=()=>{
			phoneValue.value?openKey.value = false:'';
		}
	const	keyBack=()=>{
			openKey.value = false
		}
	const	onInput=(e:any)=>{
		    console.log(e)
			phoneValue.value = e
			
		}
	const	tapNavTo=(url:any)=>{
			uni.navigateTo({url: url})
		}
		//暂
	// const	hide=(source:any)=> {
	// 		hidePop('pop1');
	// 		emit('backPop');
	// 	}
	// const	show=(source:any)=> {
	// 		showPop('pop1')
	// 	}
	// const	subtimPop_back=(s:any)=> {
	// 	  emit('backPop');
	//  }
	const hidePop=(pop:any='', source:any='', fn:any='')=> {
	 	zIndex.value = false;
	 	// this.$global.PREV_POP = pop;
	 	switch (pop) {
	 		case 'pop1':
	 			pop1.value.close();
	 			// fn && fn(res);
	 			break;
	 		case 'pop2':
	 			pop2.value.close();
	 			// fn && fn(res);
	 			break;
	 		default:
	 			break;
	 	}
	 }
	const showPop=(pop:any='', fn:any='')=> {
	 	zIndex.value = true;
	 	// this.$global.CURRENT_POP = pop;
	 	// console.log('当前弹窗' + this.$global.CURRENT_POP, 'pre弹窗' + this.$global.PREV_POP);
	 	switch (pop) {
	 		case 'pop1':
	 			pop1.value.open();
	 			break;
	 		case 'pop2':
	 			!phoneValue.value?openKey.value = true:''
	 			pop2.value.open();
	 			break;
	 		default:
	 			break;
	 	}
	 }
	const stopPrevent=()=> {}
</script>

<style lang="scss">
	.utModal {
		min-height: 1088rpx;
		background: #F2F5FC;
		padding-bottom: 150rpx;
		.mdian{
			height: 100%;
		}
	}
	.ut_top {
		height: 220rpx;
		background: #56bf7a;
	}
	.ut_cent {
		// margin-top: 80rpx; //125
		min-height: 596rpx; //588
		width: calc(100% - 40rpx);
		background: #ffffff;
		border-radius: 16rpx;
		margin-top: -108rpx;
		min-height: 540rpx;
		z-index: 3;
		&.nbg{
			background: none;
		}
		// transition: all 0.2s ease-out;
	}
	
	//底部按钮-s
	.bottomBtn{
		width: 100%;
		height: 150rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 98;
	}
	
	.sbbtnbox {
		width: 390rpx;
		.full_btn,
		.sublef_new {
			line-height: 81rpx;
			height: 80rpx;
		}
		.sublef_new{
			background-color: #404040;
			border-radius: 50rpx 0 0 50rpx;
		}
		.subcont {
			width: 100%;
		}
		.subBtn {
			border-radius: 0 50rpx 50rpx 0;
			width: 192rpx;
			height: 80rpx;
			line-height: 81rpx;
			background-color: #56bf7a;
			&.gry {
				background: #d0cfcf;
			}
			&.ban {
				opacity: 0.88;
			}
			&.sure{
				line-height: 1;
			}
		}
	}
	// 底部按钮-e
	// pop2-s
	.dianBox{
		padding-top: 100rpx;
		.search {
			width: 100%;
			height: 96rpx;
			border: 1px solid #56bf7a;
			box-sizing: border-box;
			box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.08);
			border-radius: 96rpx;
		}
		.seachIco {
			margin: 0;
			padding: 0 0.8em 0 0.5em;
			font-size: 32rpx;
			color: #56bf7a;
		}
		.phico{
			font-size: 32rpx;
			margin-left: 0!important;
		}
		.search-form {
			background-color: #fff;
			.seinput{
				font-size: 36rpx;
			}
		}
	}
	.numkeyBox{
		position: absolute;
		width: 654rpx;
		height: 0;
		background: #FAFAFA;
		left:48rpx;
		top:210rpx;
		z-index:9;
		overflow: hidden;
		&.show{
			height: 452rpx;
			transition: height 0.1s ease-out;
		}
	}
	.morconlist{
		padding-top: 80rpx;
	}
	.nswitch{
		transform: scale(0.8);
	}
	// pop2-e
	// pop1-s
	.duiItm{
		width: 100%;
		height: 76rpx;
	}
	.duiList{
		width: 100%;
		height: 576rpx;
		border-radius: 16rpx;
		background: #ffffff;
	}
	.duiScr{
		width: 100%;
		height: calc(100% - 96rpx);
	}
	.duiPro{
		width: 100%;
		min-height: 238rpx;
		border-radius: 16rpx;
		background: #ffffff;
	}
	.proListbox{
		min-height: 120rpx;
		width: calc(100% - 20rpx);
		// overflow-x: scroll;
		position: relative;
		// white-space: nowrap;
		// overflow-y: hidden;
		// overflow-x: scroll;
		.pritem{
			min-width: 102rpx;
			height: 76rpx;
			line-height: 77rpx;
			padding: 0 6rpx;
			margin: 20rpx 20rpx 0 0;
			border-radius: 8rpx;
			border: 1px solid #E1E1E1;
			&.act{
				border: 1px solid #56BF7A;
				color: #56BF7A;
				background: rgba(86, 191, 122, 0.15);
			}
			&:nth-child(5n-4){
				.contrNumbox {
					left:-40rpx;
				}
				.jtbox{
					&::before{
						left:60rpx;
					}
				}
			}
			&:nth-child(5n-3){
				.contrNumbox {
					left:-136rpx;
				}
				.jtbox{
					&::before{
						left:155rpx;
					}
				}
			}
			&:nth-child(5n-2){
				.contrNumbox {
					left:-136rpx;
				}
				.jtbox{
					&::before{
						left:155rpx;
					}
				}
			}
			&:nth-child(5n-1){
				.contrNumbox {
					left:-136rpx;
				}
				.jtbox{
					&::before{
						left:155rpx;
					}
				}
			}
			&:nth-child(5n){
				.contrNumbox {
					left:-179rpx;
				}
				.jtbox{
					&::before{
						left:200rpx;
					}
				}
			}
		}
	}
	.contrNumbox{
		position: absolute;
		height: 0;
		width: 380rpx;
		// left: 0;
		top: 0;
		overflow: hidden;
		&.show{
			padding: 10rpx;
			transition: all 0.16s ease-out;
			top: -250rpx;
			height: 245rpx;
		}
		.jtbox{
			&:before{
				content:'';
				position: absolute;
				width: 0;
				height: 0;
				align-self: center;
				position: absolute;
				border: 20rpx solid transparent;
				bottom:-17rpx;
				border-bottom: none;
				border-top-color: #fff;
				filter: drop-shadow(0px 4px -6rpx rgba(0, 0, 0, 0.06));
				// left: 100rpx;
			}
		}
	}
	.contrMain{
		border-radius: 8rpx;
		background: #FFF;
		box-shadow: 0px 2px 18rpx 0px rgba(0, 0, 0, 0.15);
	}
	.cart_box{
		min-width: 140rpx;
		display: flex;
		align-items: center;
		.cacBox{
			display: inline-block;
			min-width: 70rpx;
			min-height: 70rpx;
			background: #EEEFF3;
			border-radius: 50%;
			line-height: 71rpx;
			text-align: center;
			transform: translate(0px, 0px);
			// transition: all 0.1s linear;
			// &:hover{
			// 	animation: tap-up 0.1s linear;
			// 	transform: translate(1px, 1px);
			// 	background-color: red;
				
			// }
			&.act{
				background: rgba(238, 239, 243, 0.3);
				color: #d9d9d9;
			}
		}
		.cacInput{
			width: 100rpx;
			text-align: center;
			font-size: 60rpx;
			height: 80rpx;
			
		}
	}
</style>